<template>
<div id="ChooseUser" class="page-blank">
  <van-nav-bar title="选择门店" left-arrow @click-left="close()"/>
  <van-search v-model="searchValue" placeholder="请输入店铺名称" show-action shape="round">        
    <div class="ft-blue" slot="action">搜索</div>
  </van-search>
  <div class="flex-body">
    <van-checkbox-group v-model="checkboxValue" v-if="multiple">
      <van-cell-group>
        <van-cell :title="v.shopName" clickable v-for="v in list" :key="v.shopId">
          <van-checkbox slot="right-icon" :name="v.shopId" ref="checkboxes"/>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <van-radio-group v-model="value" v-else>
      <van-cell-group>
        <van-cell :title="v.shopName" clickable v-for="v in list" :key="v.shopId">
          <van-radio slot="right-icon" :name="v.shopId" />
        </van-cell>
      </van-cell-group>
    </van-radio-group>
  </div>  
  <div style="height: 1px; background: #F1F1F1;"></div>
  <van-button round type="info" size="small" @click="submit">确定</van-button>
</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import axios from '@/utils/request';

@Component
export default class ChooseUser extends Vue {

  @Prop()
  cb: any

  @Prop()
  close: any

  @Prop()
  multiple: any

  @Prop()
  initvalue: any

  page: any = 1

  searchValue: any = ''
  value: any = ''
  alllist: any = []
  get list() {
    let list: any = this.alllist.filter((ele: any) => ele.shopName.indexOf( this.searchValue ) > -1);
    console.log(list, 'list')
    return list.slice( 0, 100 );
  }

  checkboxValue: any = []

  submit(item: any) {
    if(this.multiple){
      let arr = this.alllist.filter((v: any)=> this.checkboxValue.find((val: any) => v.shopId === val));
      this.cb(arr);
    }else{
      console.log(this.value)
    }
  }

  getList() {
    // let page = this.page, size = 30, userId = this.$store.state.userInfo.userId;
    // let query: any = { page, size, userId };
    // if(this.searchValue) query.shopName = this.searchValue;
    // axios.get('/api/ShopManageController/getShopManageList', query).then((res: any) => {
    //   let list = res.list || [];
    //   this.loading = false;
    //   this.list.push( ...list );
    //   this.page = page + 1;
    //   if(res.isLastPage) this.finished = true;
    // }).catch(()=>{
    //   this.loading = false;
    // })
    axios.get('/api/ShopManageController/allShop', { content: '' }).then((res: any) => {
      console.log(res);
      let arr: any = [];
      for(let key in res) {
        arr.push({ shopId: key, shopName: res[key] });
      }
      this.alllist = arr || [];
      this.$nextTick(() => {
        this.checkboxValue = this.initvalue.slice(0);
      });
    })
  }

  mounted() {
    this.getList();
  }
  
};
</script>

<style lang="scss">
#ChooseUser {
}
</style>

